<template>
  <nw-PageTitle title="烹饪日志" isBack />
  <nw-PageContainer>
    <view class="tabs">
      <view
        v-for="(row, i) in tabList"
        :key="i"
        :class="[
          'tab',
          {
            active: tabCurrent === row.value
          }
        ]"
        @click="handleTabClick(row, i)"
      >
        <text class="tab-text">{{ row.label }}</text>
      </view>
    </view>
    <scroll-view class="scroll-table" scroll-y enable-flex>
      <view v-if="tableList.length" class="nw-table nw-table2">
        <view class="tr">
          <view class="th">{{ $t('system.recipeName') }}</view>
          <view class="th">{{ $t('system.tasteStyle') }}</view>
          <view class="th">{{ $t('system.servingCount') }}</view>
          <view class="th">{{ $t('public.startTime') }}</view>
          <!-- <view class="th">{{ $t('system.totalCookTime') }}</view> -->
          <view class="th">完成时间</view>
          <view class="th">{{ $t('system.operatorName') }}</view>
          <view class="th">炒菜机sn</view>
        </view>
        <view class="tbody">
          <view class="tr" v-for="row in tableList" :key="row">
            <view class="td">{{ row.recipeName }}</view>
            <view class="td">
              {{
                g_options.getOptionText(
                  g_options.recipeTasteOptions,
                  row.tasteStyle,
                  '--'
                )
              }}
            </view>
            <view class="td">{{ row.cookCount }}</view>
            <view class="td">
              {{
                g_dayjs(row.createTime || Date.now()).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
              }}
            </view>
            <!-- <view class="td">{{ calcDuration(row) }}</view> -->
            <view class="td">
              {{
                g_dayjs(row.cookEndTime || Date.now()).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
              }}
            </view>
            <view class="td">{{ getUserName(row) }}</view>
            <view class="td">{{ row.deviceSn }}</view>
          </view>
        </view>
      </view>
      <Emptylist v-else text="无烹饪日志数据..." />
    </scroll-view>
    <!-- <uni-pagination
      :current="current"
      :pageSize="pageSize"
      :total="total"
      style="padding-top: 10rpx"
      @change="handlePageChange"
    /> -->
  </nw-PageContainer>
</template>

<script setup>
const { cookingItemList } = storeToRefs(useCookingStore())
const { userInfo } = storeToRefs(useUserStore())

// 表单参数
const tabList = reactive([
  {
    label: '当天',
    value: 1
  },
  {
    label: '最近一周',
    value: 7
  },
  {
    label: '最近一月',
    value: 30
  }
])
const tabCurrent = ref(1)
const formData = ref({
  startTime: '',
  endTime: ''
})
const loading = ref(true)
const tableList = computed(() => {
  return cookingItemList.value.filter(item => {
    if (
      (item.status === 3 || item.status === 5) &&
      g_dayjs(item.createTime).isBetween(
        formData.value.startTime,
        formData.value.endTime,
        null,
        '[]'
      )
    ) {
      return item
    }
  })
})
// const current = ref(3)
// const pageSize = ref(10)
// const total = ref(50)

onMounted(_ => {
  setTimeRange()
})

const setTimeRange = _ => {
  const startTime = g_dayjs()
    .subtract(tabCurrent.value - 1, 'day')
    .startOf('day')
    .valueOf()
  const endTime = g_dayjs().endOf('day').valueOf() // 今天
  formData.value.startTime = startTime
  formData.value.endTime = endTime
  console.log(`最近时间范围：${startTime} 至 ${endTime}`)
}

// const calcDuration = row => {
//   const seconds =
//     ((row.cookEndTime || Date.now()) - (row.cookStartTime || Date.now())) / 1000
//   return g_dayjs.duration(seconds, 'seconds').format('mm:ss')
// }

const getUserName = row => {
  return userInfo.value.userId === row.operatorUserId
    ? userInfo.value.nickName
    : ''
}

const handleTabClick = row => {
  console.log('handleTabClick', row)
  tabCurrent.value = row.value
  setTimeRange()
}

// const handlePageChange = e => {
//   current.value = e.current
//   getDataList()
// }
</script>

<style lang="scss" scoped>
.scroll-table {
  height: calc(100% - 58rpx);
  padding-top: 8rpx;
}

.tabs {
  position: relative;
  width: 100%;
  height: 58rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 42rpx;
  background-color: var(--bg-color);
  box-sizing: border-box;
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
  .tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 18rpx 0;
    .tab-text {
      height: 22rpx;
      line-height: 22rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: var(--color-333);
    }
    &.active {
      .tab-text {
        font-weight: bold;
      }
      &::after {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        display: block;
        content: '';
        width: 100%;
        height: 4rpx;
        padding: 0 14rpx;
        background-color: var(--main-theme);
      }
    }
  }
}

.nw-table {
  padding: 26rpx 20rpx;
  .tr {
    .th,
    .td {
      &:nth-of-type(3) {
        flex: 0.6;
      }
      &:nth-of-type(5),
      &:nth-of-type(7) {
        flex: 1.2;
      }
    }
  }
}
</style>
